import Canvans from '../Canvans/index'
function getTime () {
  const time = new Date()
  return {
    m: time.getMinutes(),
    s: time.getSeconds(),
    h: time.getHours()
  }
}
const config = {
  maring: 10,
  hands: 10,
  font: 20
}
class Clock extends Canvans{
  constructor(props) {
    super(props);
    this.drawClock()
  }
  drawClock = () => {
    this.drawCenter()
    this.drawCircle()
    this.drawNumber()
    this.drawTime()
  }
  drawCircle = () => {
    const context = this.context
    const canva = this.canvas
    const Radius = canva.width / 2 - config.maring
    context.beginPath()
    context.arc(canva.width / 2, canva.height / 2, Radius, 0, Math.PI * 2, true)
    context.stroke()
  }
  drawCenter = () => {
    this.context.beginPath()
    this.context.arc(this.canvas.width / 2, this.canvas.height / 2, 5, 0, Math.PI * 2, true)
    this.context.fill()
  }
  drawTime = () => {
    const obj = getTime()
    this.drawSencondes(obj.s)
    this.drawHours(obj.h)
    this.drawMinents(obj.m)
  }
  drawNumber = () => {
    const number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    const Radius = this.canvas.width / 2 - config.maring
    number.forEach(n => {
      const angle = Math.PI / 6  * (n - 3)
      const numberWidth = this.context.measureText(n).width
      const x = this.canvas.width / 2 + Math.cos(angle) * Radius - numberWidth
      const y = this.canvas.height / 2 + Math.sin(angle) * Radius + config.font
      this.context.fillText(n, x, y)
    })
  }
  drawHands = ({x , y}) => {
    this.context.moveTo(this.canvas.width / 2, this.canvas.height / 2)
    this.context.lineTo(x, y)
    this.context.stroke()
  }
  drawSencondes = (s) => {
    const angle = s * (Math.PI * 2 / 60)
    const r = this.canvas.width / 2 - config.maring - config.hands * 2
    const end = {
      x: r * Math.cos(angle),
      y: r * Math.sin(angle)
    }
    this.drawHands(end)
  }
  drawMinents = (m) => {
    const angle = m * (Math.PI * 2 / 60)
    const r = this.canvas.width / 2 - config.maring - config.hands
    const end = {
      x: r * Math.cos(angle),
      y: r * Math.sin(angle)
    }
    this.drawHands(end)
  }
  drawHours = (h) => {
    const angle = h * (Math.PI * 2 / 60)
    const r = this.canvas.width / 2 - config.maring
    const end = {
      x: r * Math.cos(angle),
      y: r * Math.sin(angle)
    }
    this.drawHands(end)
  }
}

export default Clock
